<template>
  <div
    v-if="Array.isArray(auditionList) && auditionList.length"
    class="audition-box"
  >
    <!-- 切换试听专业盒子 -->
    <div class="flex-wrap" v-if="auditionList.length > 1">
      <span class="audition-subject-title">专业：</span>
      <div class="flex-wrap flex-multi-row flex1">
        <div
          @click="changeAuditionProfession(index)"
          :class="[
            'audition-subject-item',
            auditionProfessionIndex === index
              ? 'audition-subject-item-active'
              : ''
          ]"
          v-for="(item, index) in auditionList"
          :key="`profession_${index}`"
        >
          {{ item.profession_name }}
        </div>
      </div>
    </div>
    <!-- 切换试听科目盒子 -->
    <div class="flex-wrap">
      <span class="audition-subject-title">科目：</span>
      <div class="flex-wrap flex-multi-row flex1">
        <div
          @click="changeAuditionSubject(index)"
          :class="[
            'audition-subject-item',
            auditionSubjectIndex === index ? 'audition-subject-item-active' : ''
          ]"
          v-for="(item, index) in auditionList[auditionProfessionIndex]
            .teachers"
          :key="`subject_${index}`"
        >
          {{ item.subject_name }}
        </div>
      </div>
    </div>
    <!-- 班级切换 -->
    <div class="flex-wrap">
      <span class="audition-subject-title">班级：</span>
      <div class="flex-wrap flex-multi-row flex1">
        <div
          @click="changeClass(index)"
          :class="[
            'audition-subject-item',
            classItemIndex === index ? 'audition-subject-item-active' : ''
          ]"
          v-for="(item, index) in auditionList[auditionProfessionIndex]
            .teachers[auditionSubjectIndex].teacher_list[teacherIndex]
            .classes_list"
          :key="`class_${index}`"
        >
          {{ item.classes_name }}
        </div>
      </div>
    </div>
    <!-- 科目下面的内容 -->
    <div class="audition-bottom flex-wrap">
      <!-- 播放 -->
      <div class="audition-video">
        <div
          v-if="currentAuditionList.length > 1"
          class="commo-carousel-position flex-center"
        >
          {{ lastSwiperIndex + 1 }}/{{ currentAuditionList.length }}
        </div>
        <el-carousel
          v-if="currentAuditionList.length > 0"
          height="266px"
          style="width: 100%"
          indicator-position="none"
          :autoplay="false"
          @change="
            val => {
              carouselHand(val)
            }
          "
          :arrow="currentAuditionList.length > 1 ? 'always' : 'never'"
        >
          <el-carousel-item
            v-for="(citem, cindex) in currentAuditionList"
            :key="`cover_url_${cindex}`"
          >
            <template v-if="!isShowAuditionVideo">
              <img
                class="audition-video-btn"
                src="//image.zlketang.com/public/news/images/new_official/other/play_btn1.png"
                @click="goToplayPage(citem)"
              />
              <img
                :src="parseResourceUrl(citem.cover_url)"
                onerror="javascript:this.src='\/\/image.zlketang.com/public/news/images/guanwangPic/err-course.png'"
                class="audition-video-cover"
              />
            </template>
            <zl-player
              v-if="isShowAuditionVideo && cindex === lastSwiperIndex"
              ref="videoBoxppp"
              :play-options="playingSection"
              :autoplay="true"
            ></zl-player>
          </el-carousel-item>
        </el-carousel>
        <div
          v-else
          class="audition-video-cover flex-center audition-video-no-conent"
        >
          <img
            src="//image.zlketang.com/public/news/images/new_official/play/no_course_20231110.png"
          />
        </div>
      </div>
      <div class="flex1 audition-teacher-box">
        <div
          v-for="(item, index) in auditionList[auditionProfessionIndex]
            .teachers"
          :key="`audition_${index}`"
        >
          <div
            class="flex-wrap teacher-box"
            v-show="auditionSubjectIndex === index"
          >
            <!-- 切换老师 -->
            <div
              :class="[
                'audition-teacher-item',
                tindex === teacherIndex ? 'audition-teacher-item-active' : ''
              ]"
              v-for="(titem, tindex) in item.teacher_list"
              @click="changeTeacher(item, tindex)"
              :key="`teacher_${tindex}`"
            >
              <img
                class="audition-teacher-item-img"
                :src="parseResourceUrl(titem.teacher_img)"
              />
              <div class="audition-teacher-item-name">
                {{ titem.teacher_name }}
              </div>
            </div>
          </div>
        </div>
        <!-- 教师介绍 -->
        <div>
          <div
            class="audition-teacher-introduce-title flex-wrap flex-justify-between"
          >
            <div>教师简介：</div>
            <a
              class="audition-teacher-introduce-more"
              :href="
                parseFullPath(
                  '/teacher/' +
                    auditionList[auditionProfessionIndex].teachers[
                      auditionSubjectIndex
                    ].teacher_list[teacherIndex].id +
                    '.html'
                )
              "
            >
              教师主页
              <i class="el-icon-arrow-right"></i>
            </a>
          </div>
          <div class="audition-teacher-introduce-brief text-ess-2">
            {{
              auditionList[auditionProfessionIndex].teachers[
                auditionSubjectIndex
              ].teacher_list[teacherIndex].description
            }}
          </div>
          <div class="audition-teacher-introduce-title">授课班级：</div>
          <div class="audition-teacher-introduce-class">
            {{
              auditionList[auditionProfessionIndex].teachers[
                auditionSubjectIndex
              ].teacher_list[teacherIndex].classes_list | filerClass
            }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getaudition } from '@/api/course_detail.js'
import player from '@/components/play/player.vue'
export default {
  name: 'auditionBox',
  props: {
    productInfo: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    'zl-player': player
  },
  data() {
    return {
      zlaBtn: {
        key_name: '',
        key_content: ''
      },
      playingSection: {}, //试听视频数据
      auditionProfessionIndex: 0, //当前试听专业索引
      auditionSubjectIndex: 0, //当前试听科目索引
      teacherIndex: 0, //当前老师索引
      classItemIndex: 0, //当前班级索引
      isShowAuditionVideo: false, //是否显示试听视频
      lastSwiperIndex: 0 //当前轮播图索引
    }
  },
  watch: {
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  computed: {
    // 当前试听列表
    currentAuditionList() {
      return Array.isArray(this.auditionList) && this.auditionList.length
        ? this.auditionList[this.auditionProfessionIndex].teachers[
            this.auditionSubjectIndex
          ].teacher_list[this.teacherIndex].classes_list[this.classItemIndex]
            .audition_section || []
        : []
    },
    //新版试听数据
    auditionList: function() {
      if (!this.inBrowser) return []
      let { classes_info = {} } = this.productInfo
      let { audition_content = [] } = classes_info
      // for (let index = 0; index < 3; index++) {
      //  audition_content[0].teachers[0].teacher_list=[...audition_content[0].teachers[0].teacher_list,...audition_content[0].teachers[0].teacher_list]
      // }

      return audition_content
    },
    inBrowser() {
      // 判断是否是在前端环境下
      return this.isBrowser()
    },
    // 判断是否登录
    isLogin() {
      return this.$store.state.user.isLogin
    }
  },
  filters: {
    filerClass(val) {
      let containClass = ''
      if (Array.isArray(val) && val.length) {
        let nameArr = val.map(item => item.classes_name)
        containClass = nameArr.join('、')
      }
      return containClass
    }
  },
  methods: {
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    },
    //轮播索引变化
    carouselHand(val) {
      this.isShowAuditionVideo = false
      this.lastSwiperIndex = val
      console.log(2222)
    },
    //改变试听专业
    changeAuditionProfession(index) {
      this.auditionProfessionIndex = index
      this.auditionSubjectIndex = 0
      this.teacherIndex = 0
      this.classItemIndex = 0
      this.lastSwiperIndex = 0
      this.isShowAuditionVideo = false
    },
    //改变试听科目
    changeAuditionSubject(index) {
      this.teacherIndex = 0
      this.classItemIndex = 0
      this.auditionSubjectIndex = index
      this.lastSwiperIndex = 0
      this.isShowAuditionVideo = false
    },
    //改变试听老师
    changeTeacher(item, index) {
      this.classItemIndex = 0 //当前班级索引
      this.teacherIndex = index
      this.lastSwiperIndex = 0
      this.isShowAuditionVideo = false
    },
    //改变试听班级
    changeClass(index) {
      this.classItemIndex = index
      this.isShowAuditionVideo = false
    },
    //播放试听
    async goToplayPage(item) {
      if (!this.isLogin) {
        return this.showLoginDialog()
      }
      this.$parent.dealNewProductDes('play')
      let teacherList = this.auditionList[this.auditionProfessionIndex]
        .teachers[this.auditionSubjectIndex]
      this.zlaBtn = {
        key_name: `${this.productInfo.product_name}_试听`,
        key_content: `${
          teacherList.teacher_list[this.teacherIndex].teacher_name
        }_${this.auditionList[this.auditionProfessionIndex].profession_name}_${
          this.auditionList[this.auditionProfessionIndex].teachers[
            this.auditionSubjectIndex
          ].subject_name
        }_${
          teacherList.teacher_list[this.teacherIndex].classes_list[
            this.classItemIndex
          ].classes_name
        }`
      }
      let { course_id, section_id: course_section_id } = item
      let { subject_id } = this.auditionList[
        this.auditionProfessionIndex
      ].teachers[this.auditionSubjectIndex]
      let params = {
        course_id,
        course_section_id,
        subject_id,
        product_id: this.productInfo.product_id,
        teacher_id: teacherList.teacher_list[this.teacherIndex].id,
        version: 'v2'
      }
      // console.log(2222,params)
      // 获取试听视频
      let { errcode, errmsg, data } = await getaudition(params).catch(err => {
        return { errcode: 404, errmsg: '网络错误，请重试', data: {} }
      })
      if (errcode !== 0) {
        return this.$message({ type: 'warning', message: errmsg })
      }
      if (!data.videos || !data.videos.length)
        return this.$message({
          type: 'warning',
          message: '暂无试听视频，请联系客服！'
        })
      this.isShowAuditionVideo = true
      this.playingSection = data.videos[0]
      let { classes_id, video_id, year } = this.playingSection
      let zlParams = {
        product_id: +this.productInfo.product_id,
        course_id: +this.playingSection.course_id,
        classes_id: +classes_id,
        video_id: +video_id,
        year: +year,
        is_try: 1
      }
      this.watchVideo(zlParams)
    }
  },
  mounted() {
    // console.log(111,this.currentAuditionList)
    // console.log(2222,this.auditionList)
    // console.log(666, this.productInfo)
  }
}
</script>
<style scoped>
.audition-subject-item {
  cursor: pointer;
  margin-bottom: 20px;
  padding: 7px 14px;
  background: #ffffff;
  border-radius: 8px;
  color: #666666;
}
.audition-subject-title {
  width: 42px;
  margin-right: 20px;
  line-height: 35px;
  font-size: 14px;
  font-weight: bold;
  color: #383838;
}
.audition-subject-item:hover {
  color: #383838;
}
.audition-subject-item-active {
  background: #fff2e5;
  color: #ff7819 !important;
}
.audition-video {
  position: relative;
  width: 479px;
  height: 266px;
  border-radius: 12px;
}
.audition-video-btn {
  position: absolute;
  left: calc(50% - 28px);
  top: calc(50% - 28px);
  width: 56px;
  height: 56px;
  cursor: pointer;
}
.audition-video-cover {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.audition-video-no-conent {
  background: #f5f5f5;
}
.audition-video-no-conent img {
  width: 180px;
  height: 120px;
}
.audition-teacher-box {
  margin-left: 30px;
  width: 0px;
}
.teacher-box {
  padding-bottom: 4px;
  width: 100%;
  overflow-x: auto;
  /*添加横向滚动条*/
  white-space: nowrap;
  /*不换行*/
}
.teacher-box::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 12px;
}
.teacher-box::-webkit-scrollbar {
  height: 4px;
}
.audition-teacher-item {
  display: inline-block;
  margin-left: 50px;
}
.audition-teacher-item:first-of-type {
  margin-left: 0px;
}
.audition-teacher-item-active .audition-teacher-item-img {
  border-color: #999999;
}
.audition-teacher-item-img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: solid 1px #d9d9d9;
}
.audition-teacher-item-img:hover {
  border: solid 1px #999999;
}
.audition-teacher-item-name {
  text-align: center;
  margin-top: 7px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}

.audition-teacher-introduce-title {
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #383838;
  line-height: 22px;
}
.audition-teacher-introduce-more {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
}
.audition-teacher-introduce-brief {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 24px;
}

.audition-teacher-introduce-class {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 24px;
}
.commo-carousel-position {
  position: absolute;
  right: 16px;
  top: 12px;
  padding: 4px 12px;
  margin-left: 24px;
  background-color: rgba(0, 0, 0, 0.32);
  font-size: 14px;
  color: #f0f0f0;
  border-radius: 4px;
  z-index: 87;
}
</style>
